<template>
  <custom-modal
    v-if="visible"
    :width="width"
    :visible="visible"
    :title="title || $t('vehicleInTasks')"
    :destroyOnClose="true"
    @cancel="handleCancel"
    :bodyStyle="{ height: '500px', overflowY: 'auto' }"
    class="tasksInVehicleModal"
  >
    <template slot="footer">
      <div class="tasksInVehicleDialogFooter">
        <div class="titleSmallDescText">*{{ $t('releaseVehicleActionTip') }}</div>
        <div>
          <a-button
            type="info"
            @click.stop="
              () => {
                visible = false
              }
            "
          >{{ $t('cancel') }}</a-button
          >
          <a-button
            type="primary"
            @click.stop="handleOk"
          >{{ $t('releaseVehicle') }}</a-button
          >
        </div>
      </div>
    </template>
    <display-tb-list :query="query" ref="displayTbList"></display-tb-list>
  </custom-modal>
</template>
<script>
import CustomModal from '@/components/CustomModal/index.vue'
import DisplayTbList from './displayTbList'
import taskApi from '@/api/modules/task'
export default {
  components: {
    CustomModal,
    DisplayTbList
  },
  props: {
    query: {
      type: Object,
      default () {
        return null
      }
    },
    title: {
      type: String,
      default: ''
    },
    width: {
      type: String,
      default: '1000px'
    }
  },
  data () {
    return {
      visible: false,
      loading: false,
      items: []
    }
  },
  watch: {},
  methods: {
    handleCancel () {
      this.visible = false
    },
    toggleVisible (val) {
      this.visible = val
    },
    handleOk () {
      const data = this.$refs.displayTbList.getSaveData()
      if (data.taskIds.length === 0) {
        this.$message.error(this.$t('pleaseSelect'))
        return
      }
      // 取消升级
      taskApi.upgradeStatusTaskCars(
        { taskId: data.taskIds, upgradeStatus: 3, taskVehicleId: this.query.vehicleId }
      )
        .then(() => {
          this.$message.success(this.$t('successfullyOperation'))
          this.visible = false
          this.$emit('releaseok')
        })
    }
  }
}
</script>
<style lang="less">
.tasksInVehicleModal {
  .ant-modal-header {
    border-bottom: none;
    padding: 16px 24px 10px 24px;
  }
}
</style>
<style scoped lang="less">
.tasksInVehicleDialogFooter {
  display: flex;
  justify-content: space-between;
}
</style>
